/*
 * @Author: shiguo
 * @Date: 2021-10-14 15:34:17
 * @LastEditors: shiguo
 * @LastEditTime: 2022-05-13 17:46:23
 * @FilePath: /taro-aks-lib/h5/ItemView/index.tsx
 */
import * as  React from "react";
import { View, Image, Picker } from '@tarojs/components'
import DateTimePicker from '../DateTimePicker'
import moment from 'moment'
type ItemViewProp = {
  placeholder?: string;
  title: string;
  content: string | React.ReactNode;
  onClick?: (data?: unknown) => void;
  style?: React.CSSProperties;
  mode?: 'dateTime' | 'date';
  showUnderLine?: boolean
}

export default (props: ItemViewProp) => {

  return <View style={{ display: 'flex', flexDirection: 'column', padding: '10px 15px 0px 15px', backgroundColor: 'white', ...props.style }}>
    <View style={{ fontSize: '14px', color: '#333333' }}>{props.title}</View>


    {(() => {
      if (React.isValidElement(props.content)) {
        return props.content
      }
      else {
        if (props.mode == 'dateTime') {
          return <DateTimePicker
            onValueChange={dateTime => {
              dateTime && props.onClick && props.onClick(dateTime)
            }}
          >
            <ContentView
              content={props.content as string}
              placeholder={props.placeholder}
            />
          </DateTimePicker>
        }


        if (props.mode == 'date') {
          return <Picker
            mode='date'
            value={moment().format('YYYY-MM-DD')}
            onChange={e => {
              props.onClick && props.onClick(e.detail.value)
            }}
          >
            <ContentView
              content={props.content as string}
              placeholder={props.placeholder}
            />
          </Picker>
        }

        return (
          <ContentView
            content={props.content as string}
            placeholder={props.placeholder}
            onClick={props.onClick}
          />
        )
      }

    })()}


    {props.showUnderLine && <View style={{ height: '1px', backgroundColor: '#cccccc', flexGrow: 1 }} />}
  </View>
}


type ContentViewProp = {
  content?: string;
  placeholder?: string;
  onClick?: ()=>void;
}

const ContentView = (props: ContentViewProp) => {
  return (
    <View style={{ display: 'flex', alignItems: 'center', padding: '10px 0', }} onClick={e => props.onClick && props.onClick()}>
      {
        props.content ?
          <View style={{ fontSize: '14px', color: '#333333', flex: 1 }}>{props.content}</View>
          :
          <View style={{ fontSize: '14px', color: '#999999', flex: 1 }}>{props.placeholder}</View>
      }
      <Image src={require('./icon_more.png')} style={{ width: '14px', height: '14px', marginLeft: '20px' }} mode='aspectFit' />
    </View>
  )
}